<template>
  <div>
    <!-- 添加商标按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 10px">添加商标</el-button>

    <!-- 商标列表表格 -->
    <el-table :data="brands" style="width: 100%">
      <el-table-column prop="brandId" label="品牌ID" width="80"></el-table-column>
      <el-table-column prop="brandName" label="品牌名称" width="200"></el-table-column>
      <el-table-column label="品牌图片" width="150">
        <template #default="scope">
          <img :src="scope.row.brandImg" alt="品牌图片" style="width: 100px; height: auto">
        </template>
      </el-table-column>
      <el-table-column prop="brandNet" label="官方网站" width="300">
        <template #default="scope">
          <a :href="scope.row.brandNet" target="_blank">{{ scope.row.brandNet }}</a>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="totalBrands"
        @current-change="handlePageChange"
        style="margin-top: 10px"
    />

    <addBrandDrawer :drawer-visible="isDrawerVisible"
                    @update:drawerVisible="val => isDrawerVisible = val"
                    @formSubmitted="fetchBrands"></addBrandDrawer>
    <editBrandDialog :brand="selectedBrand"
                     :drawer-visible="isEditDrawerVisible"
                     @update:drawerVisible="val => isEditDrawerVisible = val"
                     @formSubmitted="fetchBrands"></editBrandDialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getBrandByTime,deleteBrands } from '@/api/brand.js';
import addBrandDrawer from '@/components/drawer/addBrandDrawer.vue';
import editBrandDialog from '@/components/dialog/editBrandDialog.vue';

const brands = ref([]);
const currentPage = ref(1);
const pageSize = 3;
const totalBrands = ref(0);
const isDrawerVisible = ref(false);
const isEditDrawerVisible = ref(false);
const selectedBrand = ref(null);

// 获取商标数据
const fetchBrands = async () => {
  const response = await getBrandByTime(currentPage.value, pageSize);
  brands.value = response.list;
  totalBrands.value = response.totalNum;
};

// 分页改变时触发
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchBrands();
};

// 添加商标
const handleAdd = () => {
  isDrawerVisible.value = true;
};

// 编辑商标
const handleEdit = (brand) => {
  selectedBrand.value = brand;
  // console.log(selectedBrand.value)
  isEditDrawerVisible.value = true;
};

// 删除商标
const handleDelete = (brand) => {
  ElMessageBox.confirm('确认删除该品牌吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const brandIds = [brand.brandId];
    // 删除品牌逻辑
    await deleteBrands(brandIds);
    fetchBrands();
    ElMessage.success('删除成功');
  }).catch(() => {
  });
};

onMounted(() => {
  fetchBrands();
});
</script>
<style scoped>
.el-button {
  margin-right: 10px;
}
</style>